<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>2_react生命周期(旧)</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>

    <!-- 引入react核心库 -->
    <script
      type="text/javascript"
      src="../js/17.0.1/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/17.0.1/react-dom.development.js"
    ></script>
    <!-- 引入babel 将js转换成jsx -->
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

    <!-- type="text/babel" 表示写的是 jsx 使用babel 翻译 -->
    <script type="text/babel">
      class Life extends React.Component {
        // 1. 构造函数
        constructor(props) {
          super(props);
          console.log("1. Life---constructor");
          this.state = { sum: 1 };
        }
        // 2. 组件即将挂载完毕 在新版本被重命名 后期可能会删除
        // componentWillMount() {
        //   console.log("2. Life---componentWillMount");
        // }

        // 4. 组件挂载完毕
        componentDidMount() {
          console.log("4. Life---componentDidMount");
        }
        // 5. 组件即将被卸载时候调用
        componentWillUnmount() {
          console.log("5. Life---componentWillUnmount");
        }
        // 3. 组件渲染dom元素
        render() {
          console.log("3. Life---render");
          return (
            <div>
              <h2>sum: {this.state.sum}</h2>
              <button onClick={this.add}>点我++</button>
              <button onClick={this.death}>点我卸载组件</button>
              <button onClick={this.force}>强制更新</button>
            </div>
          );
        }

        // 1. 更新流程  当调用setState()时触发 如果返回true 则修改数据渲染页面 否则反之
        shouldComponentUpdate() {
          // return false
          console.log("1. Life---shouldComponentUpdate");
          return true;
        }
        // 2 .在新版本被重命名 后期可能会删除
        // UNSAFE_componentWillUpdate() {
        //   console.log("2. Life---UNSAFE_componentWillUpdate");
        // }

        // 4. 数据完成更新
        componentDidUpdate() {
          console.log("4. Life---componentDidUpdate");
        }

        //若state的值在任何时候都取决于props,那么可以使用getDerivedstateFromProps
        static getDerivedStateFromProps(){
            console.log("getDerivedStateFromProps");
            return null;
        }
        // 更新前保存快照 罕见
        getSnapshotBeforeUpdate(){
            console.log("getSnapShotBeforeUpdate");
            return null;
        }


        add = () => {
          this.setState({ sum: this.state.sum + 1 });
        };
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("root"));
        };
        force = () => {
          // 强制更新
          this.forceUpdate();
        };
      }

      ReactDOM.render(<Life />, document.getElementById("root"));
      /*
              1,初始化阶段：由ReactDOM.render()触发---初次渲染
                  1.constructor()
                  2.getDerivedStateFromProps
                  3.render()
                  4.componentDidMount() ===> 常用 初始化时做的事 例如开启定时器或者请求 或者 订阅消息
              2,更新阶段：由组件内部this,setsate()或父组件重新render触发
                  1.getDerivedstateFromProps
                  2.shouldComporentUpdate()
                  3.render()
                  4.getSnapshotBeforeUpdate
                  5.componentDidUpdate()
              3,卸载组件：由ReactDOM.unmountComponentAtNode()触发
                  1.componentwillUnmount() ===> 常用 一般在钩子中 关闭定时器 取消订阅消息等
      
      */
    </script>
  </body>
</html>
